<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盖房子啦</title>
    <style> 
       #warrpt{
           width: 400px;
           height: 400px;
           border:1px solid red;
           margin: -1px auto;
           position: relative;
           /* box-sizing: border-box; */
           
           
            
        }
      ul,li{
          padding: 0;
          margin:0;
         
          list-style: none;

      }
      ul{
          overflow: hidden;
          position: absolute;
          bottom: 0;
          box-sizing: border-box;
      }
      li{
          float: left;
          width:10px;
          height: 10px;
          box-sizing: border-box;
          border: 1px solid black;
          
      }
   
    
    </style>
       
    
    
</head>
<body>
        <div id="warrpt">
            
       
        </div>
    









    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="JQ-盖房.js"></script>
    <script type="text/javascript">
       var warpt=$("#warrpt");
       var index=0;
       
       warpt.on("click",function(){
           var allUl=$("ul");//获得所有UL标签
           var nowUl=allUl.length-1;//获得当前移动标签的下标
           var suzUl=allUl[nowUl];//获得当前移动标签
           $(suzUl).stop();
        //    $($("ul")[$("ul").length-1]).stop();
         // JQuery对象（全部ul标签 中 当前移动标签）。stop工具  
         var creatNum=20;
         if(nowUl>0){
             remove($(allUl[nowUl-1]),$(suzUl));
             creatNum=$(suzUl).children().length;//生成的li长度

         }

           addLine(warpt, index,creatNum);
           index++;

       })
    </script>


</body>
</html>